<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- <div>{{data}}</div> -->
    <table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>班级</th>
    </tr>
</table>

    
        <table v-for="val in data">
            <tr>
                <td>{{val.userId}}</td>
                <td>{{val.userName}}</td>
                <td>{{val.classId}}</td>
            </tr>
        </table>
       
    
</body>

<script>




    var obj = {
        data() {
            return {
                data: []
            }
        },
        methods: {
    userData () {
        var sum = []
            $.ajax({
                url: '/api',
                dataType: 'json',
                method: 'POST',
                async:false, // 让ajax先执行
                success: function (data) {
                 sum =data
                }
            })
        this.data = sum
        }
    },

        //在组件渲染完成后进行数据调用
        mounted() {
            this.userData()

        }
    }


    Vue.createApp(obj).mount('body')


//     $(function () {

//     let app = Vue.createApp({
//         data() {
//             return {
//                 data: []
//             }
//         },
//         methods:{
//             getdata() {
//                let hh = []
//              $.ajax({
//                     url: '/api',
//                     dataType: 'json',
//                     method: 'GET',
//                     async :false,    //让ajax先执行
//                     success: function (data) {
//                         hh = data
//                     }
//                 })
//                 this.data = hh
//                 console.log(hh);
//             }
//         },
//         created() {
//            this.getdata()
//            console.log(this.data);
            
//         }
//     })

//     app.mount('body')

// })


</script>

</html>